<template>
    <el-dropdown ref="dropdown">
        <div class="el-dropdown-link">
            <el-form-item :label="props.prItem.name" :rules="[
                { required: true, message: '请输入' + prItem.name, trigger: 'blur' },
            ]" :label-width="props.prItem.labelWidth" class="bb mb20 w329 ">
                <div class="info" >{{prItem.description}}</div>
                <el-input value="Map" placeholder="Map" readonly v-model="props.prItem.val" type="text"
                    autocomplete="off" />
            </el-form-item>
        </div>
        <template #dropdown>
            <el-dropdown-menu slot="dropdown">
                <template #default>
                    <div class="dropdowntb bb" :style="{ 'left': props.prItem.labelWidth + 'px' }">
                        <div class="fx sb ac">
                            <span class="setParams f14 c0">表格参数设置</span>
                            <span class="ib" @click="handleAddMapParam(props.prItem)">
                                <plus-btn />
                            </span>
                        </div>
                        <div class="fc mt10">
                            <table>
                                <tr>
                                    <th class="ifx">
                                        <div :key="i" v-for="i in props.prItem.titleList" class="divCell">{{ i }}</div>
                                        <div class="divCellOpt">操作</div>
                                    </th>
                                </tr><!-- 请输入内容 -->
                                <template :key="mIndex" v-for="(mList, mIndex) in props.prItem.dataModelList">                                     
                                    <tr >
                                        <td >
                                            <el-form :model="mList" ref="mMapRef" class="ifx">
                                                <div :key="key" v-for="(mItem, key) of mList"  class="divCell">
                                                   
                                                    <el-form-item class="b" :lable-width="0" style="margin: 0 !important;" :rules="[
                                                        { required: true, message: '请输入数据', trigger: 'blur' },
                                                    ]" :prop="key">
                                                        <el-input v-number-input="{ textType: 'double', doublePointNum: '30' }"
                                                            maxlength="20" class="gree b"
                                                            v-model="mList[key]"
                                                            placeholder="请输入内容" clearable />
                                                    </el-form-item>
                                                </div>
                                                <div class="divCellOpt ifc">
                                                    <el-button @click="deleteMapData(props.prItem.dataModelList, mIndex)"
                                                size="small" type="danger">删除</el-button>
                                                </div>
                                            </el-form> 
                                            <!-- v-model="props.prItem.dataModelList[mIndex][key]" -->
                                        </td>
                                        
                                        
                                    </tr>
                                     
                                </template>

                            </table>
                        </div>
                    </div>
                </template>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>
<style>
.divCell{width: 100px;text-align: center;display: inline-flex;align-items: center;justify-content: center;}
.divCellOpt{width: 60px;text-align: center;display: inline-flex;align-items: center;justify-content: flex-end;}
</style>
<script setup>

import { ref, defineExpose, defineProps, onMounted } from 'vue'
import plusBtn from '@/components/plusBtn/index.vue'
const mMapRef = ref([])
const props = defineProps({
    prItem: {
        type: Object,
        default: {},
    }
})
//添加参数集合
function handleAddMapParam(item) {
    console.log('item.unit', item.unit)
    item.dataModelList.push(JSON.parse(JSON.stringify(item.unit)))
    console.log('item.valueMap', JSON.parse(JSON.stringify(item.unit)))
}
function preventFun() { }
//添加数组参数
function handleAddListParam(item) {
    item.dataModelList.push({ p: '' })
}
//删除map格式数据项
function deleteMapData(list, index) {
    list.splice(index, 1)
}
//控制弹窗状态
const dropdown = ref()
function handleVisible(visible) {
  if (!dropdown.value) return
  if (visible) {
    dropdown.value.handleClose()
  } else {
    dropdown.value.handleOpen()
  }
}

//认证通过的状态
let valid = true
//表单验证回调
function validator(isValid, invalidFields) {
    // 认证不通过
    if (!isValid) {
        valid = false
        handleVisible(false)
    }
}
//表单认证
function checkForm() {
     if (Array.isArray(mMapRef.value)) {
        mMapRef.value.map((item, index) => {
            item.validate(validator)
        })
    } else {
        mMapRef.value.validate(validator)
    } 
    return { valid, tabIndex: props.tabIndex }
}
defineExpose({ checkForm })
</script>